@import "mediaInquiry";

.app{
    opacity: 0;
    min-height: 100vh;
    background-color: var(--bg-ffffff);
    @include transition((opacity));
    .header{
        @include size(100%, 80px);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        background-color: var(--shadow-000000-10);
        .mainContent{
            height: 100%;
            .logo{
                @include size(auto, 60px);
            }
            .item-menu{
                @include size(fit-content, 100%);
                min-width: 111px;
                margin: 0 16px;
                .item-link{
                    height: 40px;
                    display: block;
                    overflow: hidden;
                    width: 100%;
                    .oneMenu{
                        height: 80px;
                        margin-top: 0;
                        color: var(--text-ffffff);
                        position: relative;
                        z-index: 9;
                        div{
                            height: 40px
                        }
                    }
                }
                .item-box{
                    visibility: hidden;
                    @include size(auto);
                    position: absolute;
                    top: 80px;
                    left: 50%;
                    transform: translateX(-50%);
                    overflow: hidden;
                    padding: 0 5px 5px;
                    .item-box-2{
                        padding: 5px;
                        z-index: 2;
                        position: relative;
                        min-width: 168px;
                        top: 0;
                        right: 5px;
                        left: 5px;
                        box-shadow: 0 0 10px 0 var(--shadow-000000-10);
                        border-radius: 0 0 4px 4px;
                        text-align: center;
                        margin: 5px;
                        transform: translateY(-100%);
                        background-color: var(--bg-ffffff);
                        .item-item{
                            @include size(100%, 40px);
                            padding: 0 16px;
                            box-sizing: border-box;
                            display: block;
                            overflow: hidden;
                            background-color: var(--bg-ffffff);
                            border-radius: 4px;
                            .oneMenu2{
                                height: 80px;
                                margin-top: 0;
                                div{
                                    height: 40px;
                                    color: var(--text-333333);
                                }
                            }
                            &:hover{
                                background-color: var(--bg-0066cc);
                                .oneMenu2{
                                    margin-top: -40px;
                                    div{
                                        color: var(--text-ffffff);
                                    }
                                }
                            }
                        }
                    }
                }
                &.select, &:hover{
                    .oneMenu{
                        margin-top: -40px;
                    }
                }
                &:hover{
                    .item-box{
                        visibility: visible;
                        .item-box-2{
                            transform: translateY(0px)
                        }
                    }
                }
            }
        }
    }
    .main{
        @include size(100%, auto);
        flex: 1;
    }
    .footer{
        @include size(100%, 170px);
        background-color: var(--bg-0066cc);
        color: var(--text-ffffff);
        span{
            margin: 0 10px;
        }
        .rowStartCenter{
            margin: 5px 0;
        }
        a{
            color: var(--text-ffffff);
            &:hover{
                color: var(--text-999999)
            }
        }
    }
    .mainContent{
        @include size(1200px, auto);
        margin: 0 auto;
    }

    .search{
        @include size;
        min-width: 100%;
        min-height: 100%;
        background-color: transparent;
        padding: 0;
        margin: 0;
        outline: none;
        border: none;
        &::backdrop{
            background-color: var(--shadow-ffffff-50);
            backdrop-filter: blur(5px);
        }
        .dialogClose {
            position: absolute;
            top: 32px;
            right: 32px;
            color: var(--text-333333);
            font-size: 32px;
        }
        .input{
            @include size(384px, 40px);
            border: 1px solid var(--border-e0e0e0);
            border-radius: 4px 0 0 4px;
            border-right-width: 0;
            padding: 0 10px;
            background-color: var(--bg-ffffff);
            @include transition((background-color, border-color));
            input{
                @include size;
                outline: none;
                border: none;
                background-color: transparent;
                color: var(--text-333333);
                @include transition((color));
            }
            &:focus-within{
                background-color: var(--bg-fffdf8);
                border-color: var(--border-0066cc);
                input{
                    color: var(--text-0066cc);
                }
            }
        }
        button{
            @include size(66px, 40px);
            background-color: var(--bg-0066cc);
            color: var(--text-ffffff);
            font-size: 16px;
            border-radius: 0 4px 4px 0;
        }
    }
}